<template>
  <div class="sms-template-create">
    <!-- 页面标题 -->
    <el-card shadow="hover" header="物料管理-短信模板管理-创建短信模板">
      <el-form
        ref="smsTemplateForm"
        :model="form"
        label-width="200px"
        size="medium"
      >
        <!-- 短信模板名称 -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="短信模板名称" prop="templateName">
              <el-input
                v-model="form.templateName"
                placeholder="请输入短信模板名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 模板类型 -->
            <el-form-item label="模板类型" prop="templateType">
              <el-select
                v-model="form.templateType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in templateTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <!-- 总行基础模板编号 -->
            <el-form-item label="总行基础模板编号" prop="baseTemplateCode">
              <el-select
                v-model="form.baseTemplateCode"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in baseTemplateCodeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 模板内容 -->
        <el-form-item label="模板内容">
          <div class="temp_main" ref="refTempMain"></div>
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="insertProperty"
          >
            插入属性
          </el-button>
          <div class="tip">
            一条短信为64字符，超过该字符数则拆分为多条短信发送
          </div>
        </el-form-item>

        <!-- 预览展示 -->
        <el-form-item label="预览展示">
          <div class="preview-text">{{ previewContent }}</div>
        </el-form-item>

        <!-- 操作按钮 -->
        <el-form-item>
          <el-button type="primary" @click="handleSave">保存</el-button>
          <el-button @click="handleCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <editableDiv v-model="divEdit"></editableDiv>
  </div>
</template>
<script>
import editableDiv from "./editableDiv.vue";
export default {
  name: "SmsTemplateCreate",
  components: {
    editableDiv,
  },
  data() {
    return {
      divEdit: "",
      isInsert: false,
      // 表单数据
      form: {
        templateName: "",
        templateType: "",
        baseTemplateCode: "",
      },
      textContent: "", // 编辑div中的文本内容
      templateOragin: [
        {
          metricField: "",
          metricName: "",
          applyValues: "您好",
          type: "",
        },
        [
          {
            metricField: "001",
            metricName: "【分行名称】",
            type: "input",
            applyValues: "【分行名称】",
          },
          {
            metricField: "",
            metricName: "【备注】",
            applyValues: "备注值",
            type: "",
          },
          {
            metricField: "003",
            metricName: "【性别】",
            applyValues: "【性别】",
            type: "select",
          },
        ],
        {
          metricField: "",
          metricName: "",
          applyValues: "为",
          type: "",
        },
        [
          {
            metricField: "004",
            metricName: "【活动名称】",
            applyValues: "【活动名称】",
            type: "input",
          },
          {
            metricField: "",
            metricName: "",
            applyValues: "dd",
            type: "",
          },
        ],
        {
          metricField: "",
          metricName: "",
          applyValues: "的",
          type: "",
        },
        [
          {
            metricField: "005",
            metricName: "【姓名】",
            applyValues: "【姓名】",
            type: "input",
          },
        ],
      ],
      // 模板类型下拉选项（示例，可替换为接口数据）
      templateTypeOptions: [
        { label: "营销类", value: "marketing" },
        { label: "通知类", value: "notice" },
        { label: "提醒类", value: "remind" },
      ],
      // 总行基础模板编号下拉选项（示例，可替换为接口数据）
      baseTemplateCodeOptions: [
        { label: "BASIC_TEMPLATE_001", value: "BASIC_TEMPLATE_001" },
        { label: "BASIC_TEMPLATE_002", value: "BASIC_TEMPLATE_002" },
      ],
      // 属性列表，用于插入（可扩展）
      properties: ["【分行名称】", "【备注】", "【性别】", "【活动名称】"],
      tagListMain: [
        {
          metricField: "001",
          metricName: "【分行名称】",
          type: "input",
          applyValues: "【分行名称】",
        },
        {
          metricField: "002",
          metricName: "【备注】",
          type: "input",
          applyValues: "【备注】",
        },
        {
          metricField: "003",
          metricName: "【性别】",
          type: "select",
          applyValues: "【性别】",
        },
        {
          metricField: "004",
          metricName: "【活动名称】",
          type: "input",
          applyValues: "【活动名称】",
        },
        {
          metricField: "005",
          metricName: "【姓名】",
          type: "input",
          applyValues: "【姓名】",
        },
      ],
      selection: null,
    };
  },
  computed: {
    // 预览内容，简单模拟变量替换（实际可根据需求完善）
    previewContent() {
      let result = "";

      // 遍历顶层数组
      this.templateOragin.forEach((item) => {
        // 处理文本对象（如 { applyValues: "您好", type: "" }）
        if (typeof item === "object" && !Array.isArray(item)) {
          result += item.applyValues;
        }
        // 处理数组项（如包含多个子元素的数组）
        else if (Array.isArray(item)) {
          // 遍历数组中的每个子元素
          item.forEach((subItem) => {
            // 带 metricField 的标签项（如【分行名称】）取 metricName 属性
            if (subItem.metricField) {
              result += subItem.metricName;
            }
            // 纯文本项（如备注值）取 applyValues 属性
            else {
              result += subItem.applyValues;
            }
          });
        }
      });
      console.log("--result--", result);

      return result;
    },
  },
  mounted() {
    console.log("--mounted--");
    this.renderTemplateContent();
    // 添加全局点击事件监听
    window.addEventListener("click", this.handleGlobalClick);
  },
  beforeDestroy() {
    // 组件销毁前移除全局点击事件监听
    window.removeEventListener("click", this.handleGlobalClick);
  },
  methods: {
    renderTemplateContent() {
      // 创建主容器
      const tempMain = this.$refs.refTempMain;
      // 遍历 templateOragin 数组，使用 index 作为 data-index
      this.templateOragin.forEach((item, index) => {
        // 处理普通文本节点（非数组项）
        if (typeof item === "object" && !Array.isArray(item)) {
          const textNode = document.createTextNode(item.applyValues);
          tempMain.appendChild(textNode);
          return;
        }

        // 处理数组项（生成 temp_flex 容器）
        if (Array.isArray(item)) {
          const flexDiv = document.createElement("div");
          flexDiv.className = "temp_flex";
          flexDiv.setAttribute("contenteditable", "true");
          flexDiv.addEventListener("blur", this.inputBlur);
          // 使用当前索引作为 data-index（从0开始）
          flexDiv.setAttribute("data-index", index);

          // 遍历数组中的子项
          item.forEach((subItem) => {
            // 处理带 metricField 的标签项
            if (subItem.metricField) {
              const tagDiv = document.createElement("div");
              tagDiv.className = "temp_tag";
              tagDiv.setAttribute("contenteditable", "false");
              tagDiv.style.display = "inline-block";

              // 生成并设置 data-id 属性（转义双引号）
              const dataId = JSON.stringify({
                metricField: subItem.metricField,
                metricName: subItem.metricName,
                type: subItem.type,
                applyValues: subItem.applyValues,
              }).replace(/"/g, "&quot;");
              tagDiv.setAttribute("data-id", dataId);

              // 设置标签内容
              tagDiv.textContent = subItem.metricName;
              flexDiv.appendChild(tagDiv);
            } else {
              // 处理纯文本项（如备注值、dd）
              const textNode = document.createTextNode(
                subItem.type === "dd" ? "dd" : subItem.applyValues
              );
              flexDiv.appendChild(textNode);
            }
          });

          tempMain.appendChild(flexDiv);
        }
      });
    },

    // 使用示例
    // const domElement = document.querySelector('.temp_main');
    // const templateData = parseTemplateFromDOM(domElement);
    // console.log(templateData);
    parseTemplateFromDOM(domElement) {
      const templateOragin = [];

      // 遍历主容器的子节点
      Array.from(domElement.childNodes).forEach((node) => {
        // 处理文本节点
        if (
          node.nodeType === Node.TEXT_NODE &&
          node.textContent.trim() !== ""
        ) {
          templateOragin.push({
            applyValues: node.textContent.trim(),
            type: "",
          });
        }

        // 处理 temp_flex 容器
        if (node.classList && node.classList.contains("temp_flex")) {
          const flexItems = [];

          // 遍历 temp_flex 中的子节点
          Array.from(node.childNodes).forEach((subNode) => {
            // 处理 temp_tag 标签
            if (subNode.classList && subNode.classList.contains("temp_tag")) {
              try {
                // 解析 data-id 属性中的 JSON 数据
                const dataId = subNode.getAttribute("data-id");
                const parsedData = JSON.parse(dataId.replace(/&quot;/g, '"'));

                flexItems.push({
                  metricField: parsedData.metricField,
                  metricName: parsedData.metricName,
                  type: parsedData.type,
                  applyValues: parsedData.applyValues,
                });
              } catch (e) {
                console.error("Failed to parse data-id:", e);
              }
            }
            // 处理普通文本节点
            else if (
              subNode.nodeType === Node.TEXT_NODE &&
              subNode.textContent.trim() !== ""
            ) {
              // 特殊处理 "dd" 文本
              const text = subNode.textContent.trim();
              flexItems.push({
                applyValues: text,
                type: "",
              });
            }
          });

          templateOragin.push(flexItems);
        }
      });

      this.templateOragin = templateOragin;
      console.log("--parseTemplateFromDOM--", templateOragin);
    },

    // 修改后的 inputBlur 方法
    inputBlur() {
      console.log("--inputBlur--");
      this.selection = window.getSelection();
      setTimeout(() => {
        if (this.isInsert) return;
        this.parseTemplateFromDOM(this.$refs.refTempMain);
      }, 100);
    },
    // 全局点击事件处理方法
    handleGlobalClick(event) {
      const tempMain = this.$refs.refTempMain;
      if (!tempMain.contains(event.target)) {
        // 点击位置不在可编辑区域内，清除 selection
        this.selection = null;
      }
    },

    // 插入属性到模板内容
    insertProperty() {
      let _this = this;
      _this.isInsert = true;
      // 先检查是否有选中文本
      if (!_this.selection || _this.selection.rangeCount === 0) {
        _this.$message.warning("请先在模板内容中点击定位光标位置");
        return;
      }
      console.log("--insertProperty--");
      _this.insertData();
      setTimeout(() => {
        console.log("--insertProperty2--");
        _this.isInsert = false;
      }, 1000);
    },

    insertData() {
      const selection = this.selection;
      if (selection && selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        // 创建包含属性的元素
        const attributeDiv = document.createElement("div");
        // 这里使用第一个标签作为示例，实际可以根据需求选择标签
        const dataId = this.tagListMain[0];
        attributeDiv.className = "temp_tag";
        attributeDiv.contentEditable = false;
        attributeDiv.setAttribute("data-id", JSON.stringify(dataId));
        attributeDiv.textContent = dataId.metricName;
        console.log("--attributeDiv--", attributeDiv, dataId);

        // 插入节点
        range.insertNode(attributeDiv);
        // 将光标移动到新插入的节点后面
        range.setStartAfter(attributeDiv);
        range.collapse(true);
        selection.removeAllRanges();
        selection.addRange(range);

        // 根据当前DOM结构重新生成templateOragin
        this.parseTemplateFromDOM(this.$refs.refTempMain);
      }
    },

    // 保存
    handleSave() {
      this.$refs.smsTemplateForm.validate((valid) => {
        if (valid) {
          // 这里可调用接口提交表单数据：this.form
          this.$message.success("表单验证通过，可提交接口保存");
        } else {
          this.$message.error("请完善表单必填项");
        }
      });
    },
    // 取消
    handleCancel() {
      this.$refs.smsTemplateForm.resetFields();
      this.$router.back();
    },
    // 处理内容变化
    handleContentChange(event) {
      const newContent = event.target;
      console.log("内容变化:", newContent.textContent);
      // 这里可以更新数据或执行其他操作
      // 例如：this.form.templateContent = newContent;
    },
  },
};
</script>

<style>
.sms-template-create {
  padding: 20px;
}
.tip {
  color: #999;
  font-size: 12px;
  margin-top: 8px;
}
.temp_main {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid #ccc;
  padding: 10px 20px;
  border-radius: 6px;
  letter-spacing: 1px;
}
.temp_flex {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 5px 10px;
  line-height: 20px;
  border-radius: 4px;
}
.temp_tag {
  display: inline-block;
  line-height: 20px;
  color: blue;
  border: 1px solid blue;
  /* margin: 0 10px; */
  border-radius: 4px;
}
/* :focus-visible {
  outline: none;
} */
.preview-text {
  text-align: left;
  border: 1px solid #ccc;
  padding: 10px 20px;
  border-radius: 6px;
  letter-spacing: 1px;
}
</style>